<template>
	<view @click="onClick">
		<view :userInteractionEnabled="false" v-if="!_label && props.vertical"
			:style="[{backgroundColor: (_realColor?tmcomputed.color:tmcomputed.border)}, props.vertical ? { width: props.border+'rpx', height: props.height + 'rpx' } : '']"
			:class="[props.vertical ? `mx-${props.margin[0]}` : `my-${props.margin[1]}`]"></view>
		<view :userInteractionEnabled="false" v-if="_label && !props.vertical" class="flex flex-row flex-center">
			<view
				:style="[tmcomputed ? { backgroundColor: (_realColor?tmcomputed.color:tmcomputed.border), height: props.border + 'rpx' } : '']"
				:class="[`my-${props.margin[1]}`, align == 'left' ? 'flex-2' : '', align == 'right' ? 'flex-10' : '', align == 'center' ? 'flex-1' : '']">
			</view>
			<view v-if="props.label" :class="[(isDark ? 'opacity-4' : '')]">
				<tm-text :fontSize="props.fontSize" :dark="isDark" :followTheme="props.followTheme"
					:color="props.fontColor" :label="props.label" :_class="['mx-32']"></tm-text>
			</view>
			<view
				:style="[tmcomputed ? { backgroundColor:(_realColor?tmcomputed.color:tmcomputed.border), height: props.border + 'rpx' } : '']"
				:class="[`my-${props.margin[1]}`, align == 'left' ? 'flex-10' : '', align == 'right' ? 'flex-2' : '', align == 'center' ? 'flex-1' : '']">
			</view>
		</view>
		<view :userInteractionEnabled="false" v-if="!_label && !props.vertical" class="flex flex-row flex-center">
			<view class="flex-1" :class="[`my-${props.margin[1]}`]"
				:style="[tmcomputed ? { backgroundColor: (_realColor?tmcomputed.color:tmcomputed.border), height: props.border + 'rpx' } : '']">
			</view>

		</view>
	</view>
</template>

<script lang="ts" setup>
	/**
	 * 分割线
	 * @description 分割线，带文本标签，提供左，中，右文本标签。
	 */
	import {
		getCurrentInstance,
		computed,
		ref,
		provide,
		inject
	} from "vue";
	import {
		tmVuetify
	} from "../../tool/lib/interface";
	import {
		custom_props,
		computedTheme,
		computedDark,
	} from "../../tool/lib/minxs";
	import {
		useTmpiniaStore
	} from '../../tool/lib/tmpinia';
	import tmText from "../tm-text/tm-text.vue";
	const store = useTmpiniaStore();
	// 混淆props共有参数
	const props = defineProps({
		...custom_props,
		color: {
			type: String,
			default: 'grey-3'
		},
		fontColor: {
			type: String,
			default: 'grey-1'
		},
		fontSize: {
			type: Number,
			default: 26
		},
		vertical: {
			type: [Boolean],
			default: false
		},
		height: {
			type: [Number, String],
			default: 26
		},
		label: {
			type: String,
			default: ''
		},
		align: {
			type: String,
			default: 'center' //left,right,center
		},
		margin: {
			type: Array,
			default: () => [16, 24]
		},
		border: {
			type: [Number],
			default: 1
		},
		//使用原始颜色为线条色，而不使用计算过的颜色值。
		realColor: {
			type: [Boolean],
			default: false
		}
	});
	const emits = defineEmits(["click"])
	//线的方向。
	const borderDir = computed(() => props.vertical ? 'left' : 'bottom');
	const _label = computed(() => props.label);
	// 设置响应式全局组件库配置表。
	const tmcfg = computed < tmVuetify > (() => store.tmStore);
	const _realColor = computed(() => props.realColor)
	const isDark = computed(() => computedDark({
		...props,
		borderDirection: borderDir.value
	}, tmcfg.value));
	//计算主题
	const tmcomputed = computed(() => computedTheme({
		...props,
		borderDirection: borderDir.value
	}, isDark.value, tmcfg.value));
	function onClick(e:any){
		emits("click",e)
	}
</script>

<style>
</style>
